<template>
    <h1>{{ msg }}</h1>
    <button @click="setCount">{{ count }}</button>
    <input type="text" v-model="todo" />
    <button class="addTodo" @click="addTodo">add</button>
    <button class="loadUser" @click="loadUser">load</button>
    <p v-if="user.loading" class="loading">Loading</p>
    <div v-else class="userName">{{ user.data && user.data.username }}</div>
    <p v-if="user.error" class="error">error!</p>
    <ul>
        <li v-for="(todo, index) in todos" :key="index">{{ todo }}</li>
    </ul>
    <hello msg="1234"></hello>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import Hello from './Hello.vue'
import axios from 'axios'
export default defineComponent({
    name: 'HelloWorld',
    components: {
        Hello
    },
    props: {
        msg: String
    },
    emits: ['send'],
    setup(props, context) {
        const todo = ref('')
        const todos = ref<string[]>([])
        const user = reactive({
            data: null as any,
            loading: false,
            error: false
        })
        const count = ref(1)
        const setCount = () => {
            count.value++
        }
        const addTodo = () => {
            if (todo.value) {
                todos.value.push(todo.value)
                context.emit('send', todo.value)
            }
        }
        const loadUser = () => {
            user.loading = true
            axios.get('https://jsonplaceholder.typicode.com/users/1').then(resp => {
                console.log(resp)
                user.data = resp.data
            }).catch(() => {
                user.error = true
            }).finally(() => {
                user.loading = false
            })
        }
        return {
            count,
            setCount,
            todo,
            todos,
            addTodo,
            user,
            loadUser,
        }
    }
})
</script>